<template>
  <div>
    <div class="flexRBC top">
      <div class="title">员工审批：{{ curSelectLabel }}</div>
      <div>
        <el-button type="primary" size="medium" round @click="handleBack">返回</el-button>
      </div>
    </div>

    <div>
      <!-- 筛选 -->
      <div class="app-main-filter-collapse-box">
        <el-collapse>
          <el-collapse-item title="按条件筛选" name="1">
            <div>
              <el-form ref="filterForm" :model="filterForm" label-width="80px" size="small">
                <el-form-item label="状态：" prop="status">
                  <el-radio-group v-model="filterForm.status">
                    <el-radio label="all">所有</el-radio>
                    <el-radio
                      v-for="item in statusOptions"
                      :key="item.label"
                      :label="item.label"
                    >{{ item.value }}</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" round @click="submitForm('filterForm')">筛 选</el-button>
                  <el-button round @click="resetForm('filterForm')">重 置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-collapse-item>
        </el-collapse>
        <div class="del-btn">
          <el-button type="text" :disabled="userIds.length===0" @click="pass('batch')">批量通过</el-button>
          <el-button type="text" :disabled="userIds.length===0" @click="refuse('batch')">批量拒绝</el-button>
        </div>
      </div>

      <!-- 表格内容 -->
      <div class="table">
        <el-table
          v-loading="tableLoading"
          :data="list"
          border
          stripe
          style="width: 100%"
          size="small"
          element-loading-text="加载中"
          empty-text="暂无数据"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" fixed="left" :selectable="checkboxInit" />
          <el-table-column prop="createTime" label="申请时间" fixed="left" />
          <el-table-column prop="name" label="申请人" fixed="left" />
          <el-table-column prop="phone" label="手机号" />
          <el-table-column prop="shopName" label="申请门店" />
          <el-table-column prop="status" label="审核状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status===0" class="app-text-color-warning">待审核</span>
              <span v-if="scope.row.status===1" class="app-text-color-success">已通过</span>
              <span v-if="scope.row.status===2" class="app-text-color-danger">已拒绝</span>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" />
          <el-table-column label="操作" width="120" fixed="right">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.status===0"
                type="text"
                size="small"
                @click="pass('single',scope.row)"
              >通过</el-button>
              <el-button
                v-if="scope.row.status===0"
                type="text"
                size="small"
                @click="refuse('single',scope.row)"
              >拒绝</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <pagination-direction
        v-if="paginationConfig.total!==0"
        :config="paginationConfig"
        @sizeschange="sizesChange"
        @pagechange="pageChange"
      />
    </div>
    <dialog-user-approve ref="dialogUserApprove" :scope="scope" />
  </div>
</template>

<script>
import { getUserApproveList } from '@/api/user'
import DialogUserApprove from './DialogUserApprove'
export default {
  components: {
    DialogUserApprove
  },
  props: {
    shopId: {
      type: Number,
      default: null
    },
    shopName: {
      type: String,
      default: ''
    },
    curSelectLabel: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 配置
      // 分页配置
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      statusOptions: [
        { label: '0', value: '待审批' },
        { label: '1', value: '已通过' },
        { label: '2', value: '已拒绝' }
      ],
      scope: 2,
      // 状态
      tableLoading: false, // 表格loading
      // 数据
      list: [], // 表格数据
      userIds: [], // 批量用户的id
      users: [], // 批量用户的name
      filterForm: {
        status: '0'
      }
    }
  },
  watch: {
    shopId(val) {
      this.initData(1)
    }
  },
  mounted() {
    this.initData(1)
  },
  methods: {
    /**
       *  获取数据
       */
    // 获取数据
    initData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      // 加入 page
      this.filterForm.page = page
      this.filterForm.pageSize = pageSize
      const params = Object.assign({}, this.filterForm)
      // 清除多余字段
      for (const key in params) {
        if (params[key] === '' || params[key] === 'all') {
          delete params[key]
        }
      }
      this.tableLoading = true
      if (this.shopId !== -1) {
        params.shopId = this.shopId
      }
      getUserApproveList(params)
        .then(res => {
          this.list = res.data.list
          this.paginationConfig.total = res.data.total
          this.paginationConfig.page = res.data.pageNum
        })
        .catch(() => {})
        .finally(() => {
          this.tableLoading = false
        })
    },

    // 分页sizes改变
    sizesChange() {
      this.initData()
    },

    // 分页page改变
    pageChange() {
      this.initData()
    },

    // 初始化table多选按钮是否可以勾选
    checkboxInit(row, index) {
      if (row.status === 0) return 1
      else return 0
    },

    // 多选状态栏改变
    handleSelectionChange(rows) {
      if (rows) {
        const ids = []
        const users = []
        rows.map(item => {
          ids.push(item.id)
          users.push(item.name)
        })
        this.userIds = ids
        this.users = users
      }
    },

    /**
       * 按钮组
       */
    //  通过
    pass(type, row) {
      if (type === 'batch') {
        this.$refs.dialogUserApprove.pass('batch', this.userIds).then(res => {
          this.initData(1)
        })
      } else {
        this.$refs.dialogUserApprove.pass('single', row).then(res => {
          this.initData(1)
        })
      }
    },

    // 拒绝
    refuse(type, row) {
      if (type === 'batch') {
        this.$refs.dialogUserApprove.refuse('batch', this.userIds).then(res => {
          this.initData(1)
        })
      } else {
        this.$refs.dialogUserApprove.refuse('single', row).then(res => {
          this.initData(1)
        })
      }
    },

    // 返回
    handleBack() {
      this.$emit('changeShowType')
    },

    // 条件筛选
    submitForm() {
      this.initData(1)
    },

    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .top {
    margin-bottom: 10px;
    .title {
      font-size: 20px;
    }
  }
  /* 删除按钮 */
  .del-btn {
    border-top: 1px solid #e7e7e7;
  }
</style>
